<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 传递布尔类型的时候，不需要设置值，有添加属性就为真 -->
        <box :title="title" age="18" sex="男" h="180" is></box>

    </div>
</body>

<template id="box">
    <h1> 子组件：{{title}} - {{age}} - {{sex}} - {{h}} {{is ? '真' : '假'}} </h1>
</template>

<script>

    const box = {
        template: '#box',
        // props: ['title']
        props: {
            title: String, // 验证数据类型要是字符串类型
            age: [Number, String], // '设置多类型'
            sex: {
                type: String,
                required: true // 设置为必填选项，父组件必须传递该属性
            },
            h: {
                // 设置默认值，没有传递的时候使用的是默认值，有传递就用传递过来的值
                default: 175,
                type: [String, Number]
            },
            is: Boolean
        }
    }

    const app = {
        data() {
            return {
                title: '锄禾日当午'
            }
        },
        methods: {},
        components: {
            box
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>